<template>
  <div v-if="Object.keys(detailInfo).length !== 0" id="detail-info">
    <div class="desc">{{ detailInfo.desc }}</div>
    <div class="key">
      {{ detailInfo.detailImage[0].key }}
    </div>
    <div class="image-list">
      <img
        v-for="item in detailInfo.detailImage[0].list"
        :key="item"
        :src="item"
        @load="imgLoad"
      />
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailInfo",
  props: {
    detailInfo: {
      type: Object,
    },
  },
  methods: {
    imgLoad() {
      this.$emit("imgLoad");
    },
  },
};
</script>

<style scoped>
#detail-info {
  padding-bottom: 30px;
  border-bottom: solid 5px #f2f5f8;
}
.desc {
  font-size: 14px;
  padding: 20px 15px;
}
.key {
  font-size: 15px;
  padding: 0 0 15px 15px;
}
img {
  width: 100%;
}
</style>